<script setup lang="ts">
import closeImg from '@/assets/image/collection/firefight/close.png'
import { queryCarTypeDic } from '@/service/api'
import {
  setAttrInfo,
  saveMapFactorInfo,
  removeActiveMapFactor,
  deleteEssentialFactor,
  removeLastMapFactorActive,
} from '@/utils'
import { propertyControlList, attributeType, CarType } from './LeftFeatureControl.module'
import { ElMessage, ElMessageBox } from 'element-plus'

const firefightPlotStore: any = useFirefightPlotStore()
const options: any = ref([])

const currentAttribute: any = computed(() => {
  return firefightPlotStore.attribute
})

const propertyDataObj = ref<any>({
  zj: '',
  name: '',
  radius: 5,
  rotate: 0,
  lng: 0,
  lat: 0,
  alt: 0,
  jdHeight: 0,
})

const getqueryCarTypeDic = () => {
  queryCarTypeDic({
    key: 'cllx',
    bz:
      firefightPlotStore.attribute.id == undefined
        ? CarType[firefightPlotStore.currentCheckFeatureType?.bzlx]
        : CarType[firefightPlotStore.attribute.bzlx],
  }).then((res) => {
    options.value = res
  })
}

const calculateValue = (type: string, operation: string, step: number) => {
  if (operation === 'min') {
    return currentAttribute.value[type] - step
  } else if (operation === 'max') {
    return currentAttribute.value[type] + step
  }
}

//设置经纬度高度
const setLngLatAlt = () => {
  let wzxx

  //多边形 / 线
  if (
    firefightPlotStore.bzlxWarPolygon.includes(firefightPlotStore.attribute.bzlx) ||
    firefightPlotStore.bzlxWarPolyline.includes(firefightPlotStore.attribute.bzlx)
  ) {
    wzxx = firefightPlotStore.attribute.wzxx.map((item: any) => {
      return { lng: item.lng, lat: item.lat, alt: item.alt + propertyDataObj.value.jdHeight }
    })
  }
  //单点创建要素
  else {
    wzxx = {
      lng: propertyDataObj.value.lng,
      lat: propertyDataObj.value.lat,
      alt: propertyDataObj.value.alt,
    }
  }

  setAttrInfo(
    firefightPlotStore.attribute.id ? firefightPlotStore.attribute.id : 'temp',
    firefightPlotStore.attribute.bzlx,
    wzxx,
    null
  )
}

//设置旋转角度
const setRotate = () => {
  setAttrInfo(
    firefightPlotStore.attribute.id ? firefightPlotStore.attribute.id : 'temp',
    firefightPlotStore.attribute.bzlx,
    null,
    propertyDataObj.value.rotate
  )
}

const stateGroup: any = ref()
watch(
  () => firefightPlotStore.currentCheckFeatureType,
  (newValue: any, oldValue) => {
    for (const i in propertyControlList) {
      if (i == newValue?.type) {
        stateGroup.value = propertyControlList[i]
        if (newValue?.selectInput) {
          getqueryCarTypeDic()
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)

watch(
  () => firefightPlotStore.attribute,
  (newValue, oldValue) => {
    propertyDataObj.value = { ...newValue }

    propertyDataObj.value.jdHeight = 0

    for (const i in propertyControlList) {
      if (
        firefightPlotStore.attribute?.bzlx &&
        i == attributeType[firefightPlotStore.attribute?.bzlx]
      ) {
        stateGroup.value = propertyControlList[i]
        if (
          firefightPlotStore.currentCheckFeatureType?.selectInput ||
          firefightPlotStore.attribute?.bzlx == '8' ||
          firefightPlotStore.attribute?.bzlx == '9' ||
          firefightPlotStore.attribute?.bzlx == '10' ||
          firefightPlotStore.attribute?.bzlx == '11'
        ) {
          getqueryCarTypeDic()
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
onMounted(() => {})
const carTypeList = ref<any>([])

const handleLayerControlOperation = (type: string) => {
  //确认
  if (type === 'confirm') {
    const conent = firefightPlotStore.attribute.id == undefined ? '是否确认添加' : '是否确认修改'
    ElMessageBox.confirm(conent, '确认信息', {
      distinguishCancelAndClose: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    })
      .then(() => {
        firefightPlotStore.attribute.zj = propertyDataObj.value.zj
        firefightPlotStore.attribute.name = propertyDataObj.value.name
        firefightPlotStore.attribute.radius = propertyDataObj.value.radius
        firefightPlotStore.attribute.rotate = propertyDataObj.value.rotate

        firefightPlotStore.attribute.lng = propertyDataObj.value.lng
        firefightPlotStore.attribute.lat = propertyDataObj.value.lat
        firefightPlotStore.attribute.alt = propertyDataObj.value.alt

        //除多边形和线 其他要素的wzxx是对象格式
        if (
          !firefightPlotStore.bzlxWarPolyline.includes(firefightPlotStore.attribute.bzlx) &&
          !firefightPlotStore.bzlxWarPolygon.includes(firefightPlotStore.attribute.bzlx)
        ) {
          firefightPlotStore.attribute.zxjd = propertyDataObj.value.lng
          firefightPlotStore.attribute.zxwd = propertyDataObj.value.lat
          firefightPlotStore.attribute.zxgd = propertyDataObj.value.alt

          firefightPlotStore.attribute.wzxx = {
            lng: propertyDataObj.value.lng,
            lat: propertyDataObj.value.lat,
            alt: propertyDataObj.value.alt,
          }
        } else {
          firefightPlotStore.attribute.wzxx.forEach((item: any) => {
            item.alt += propertyDataObj.value.jdHeight
          })

          const { lng, lat, alt } = window.cesiumMapTool.getPolygonCenterTwo(
            firefightPlotStore.attribute.wzxx
          )
          firefightPlotStore.attribute.zxjd = lng
          firefightPlotStore.attribute.zxwd = lat
          firefightPlotStore.attribute.zxgd = alt
        }
        saveMapFactorInfo()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: firefightPlotStore.attribute.id == undefined ? '取消添加' : '取消修改',
        })
      })
  } else if (type === 'delete') {
    ElMessageBox.confirm('是否确认删除', '确认信息', {
      distinguishCancelAndClose: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    })
      .then(() => {
        removeLastMapFactorActive()
        if (firefightPlotStore.attribute.id !== undefined) {
          deleteEssentialFactor()
        } else {
          removeActiveMapFactor(firefightPlotStore.currentCheckFeatureType.bzlx, 'temp')
          firefightPlotStore.isLeftPropertyEditFlag = false
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }
}

const closePanel = () => {
  //如果是编辑要素 点击关闭 还原要素信息 / 如果是新增要素 点击关闭 删除临时要素
  if (firefightPlotStore.attribute.id) {
    setAttrInfo(
      firefightPlotStore.attribute.id,
      firefightPlotStore.attribute.bzlx,
      firefightPlotStore.attribute.wzxx,
      firefightPlotStore.attribute.rotate
    )
  } else {
    removeActiveMapFactor(firefightPlotStore.currentCheckFeatureType.bzlx, 'temp')
  }

  removeLastMapFactorActive() //移除上一次要素选中效果

  firefightPlotStore.isLeftPropertyEditFlag = false
}
</script>
<template>
  <view class="property-container">
    <!-- 头部 -->
    <div class="property-header">符号属性</div>
    <img
      class="w-30px h-30px absolute top-9px right-2px"
      style="cursor: pointer"
      :src="closeImg"
      @click="closePanel"
    />

    <!-- 主要内容 -->
    <div class="property-main">
      <div v-if="stateGroup?.label" class="top-group" style="display: flex; flex-wrap: wrap">
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/w.png"
          alt=""
        />
        <div style="margin: -2px 0 4px 7px">注记</div>
        <div
          v-show="
            firefightPlotStore.currentCheckFeatureType?.selectInput ||
            firefightPlotStore.attribute?.bzlx == '8' ||
            firefightPlotStore.attribute?.bzlx == '9' ||
            firefightPlotStore.attribute?.bzlx == '10' ||
            firefightPlotStore.attribute?.bzlx == '11'
          "
        >
          <el-select v-model="propertyDataObj.zj">
            <el-option
              v-for="item in options"
              :key="item.zddm"
              :label="item.sm"
              :value="item.zddm"
            />
          </el-select>
        </div>
        <el-input
          v-show="
            !firefightPlotStore.currentCheckFeatureType?.selectInput &&
            firefightPlotStore.attribute?.bzlx !== '8' &&
            firefightPlotStore.attribute?.bzlx !== '9' &&
            firefightPlotStore.attribute?.bzlx !== '10' &&
            firefightPlotStore.attribute?.bzlx !== '11'
          "
          v-model="propertyDataObj.zj"
        />
      </div>

      <div
        v-if="stateGroup?.name"
        class="top-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/w.png"
          alt=""
        />
        <div style="margin: -2px 0 4px 7px">名称</div>
        <el-input v-model="propertyDataObj.name" />
      </div>

      <div
        v-if="stateGroup?.radius"
        class="top-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/bj.png"
          alt=""
        />
        <div style="margin: -2px 0 4px 7px">半径</div>
        <div style="position: relative">
          <el-input
            v-model="propertyDataObj.radius"
            @blur="
              propertyDataObj.radius = propertyDataObj.radius.replace(
                /^\D*(\d*(?:\.\d{0,2})?).*$/g,
                '$1'
              )
            "
          />
          <span style="position: absolute; right: 10px; top: 5px; color: #fff; font-size: 14px"
            >m</span
          >
        </div>
      </div>

      <div
        v-if="stateGroup?.rotate"
        class="top-group angle-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/jd.png"
          alt=""
        />
        <div class="input-box" style="margin: -0px 0 4px 7px">
          旋转角度 {{ propertyDataObj.rotate }}<span>°</span>
        </div>
        <el-slider
          v-model="propertyDataObj.rotate"
          :step="1"
          show-input
          max="360"
          @input="setRotate"
        />
      </div>

      <div
        v-if="stateGroup?.longitude"
        class="top-group angle-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/jwd.png"
          alt=""
        />
        <div class="input-box" style="margin: -2px 0 4px 7px">
          经度
          {{
            propertyDataObj.lng &&
            propertyDataObj.lng.toString().replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')
          }}
        </div>
        <el-slider
          v-model="propertyDataObj.lng"
          :max="calculateValue('lng', 'max', 0.005)"
          :min="calculateValue('lng', 'min', 0.005)"
          :step="0.00001"
          show-input
          @input="setLngLatAlt"
        />
      </div>

      <div
        v-if="stateGroup?.latitude"
        class="top-group angle-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/jwd.png"
          alt=""
        />
        <div class="input-box" style="margin: -2px 0 4px 7px">
          纬度
          {{
            propertyDataObj.lat &&
            propertyDataObj.lat.toString().replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')
          }}
        </div>
        <el-slider
          v-model="propertyDataObj.lat"
          :step="0.00001"
          show-input
          :min="calculateValue('lat', 'min', 0.005)"
          :max="calculateValue('lat', 'max', 0.005)"
          @input="setLngLatAlt"
        />
      </div>

      <div
        v-if="stateGroup?.height"
        class="top-group angle-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/gd.png"
          alt=""
        />
        <div class="input-box" style="margin: -2px 0 4px 7px">
          高度
          {{
            propertyDataObj.alt &&
            propertyDataObj.alt.toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
          }}
        </div>
        <el-slider
          v-model="propertyDataObj.alt"
          :step="0.1"
          show-input
          :min="calculateValue('alt', 'min', 50)"
          :max="calculateValue('alt', 'max', 50)"
          @input="setLngLatAlt"
        />
      </div>

      <div
        v-if="stateGroup?.jdHeight"
        class="top-group angle-group"
        style="display: flex; flex-wrap: wrap; margin-top: 11px"
      >
        <img
          style="width: 20px; height: 20px; margin-left: -2px"
          src="../../../../assets/image/LeftFeatureControl/gd.png"
          alt=""
        />
        <div class="input-box" style="margin: -2px 0 4px 7px">
          高度
          {{ propertyDataObj.jdHeight }}
        </div>
        <el-slider
          v-model="propertyDataObj.jdHeight"
          :step="0.1"
          show-input
          :min="-50"
          :max="50"
          @input="setLngLatAlt"
        />
      </div>

      <!-- 删除  确定操作 -->
      <div class="operation-list">
        <button
          class="operation-button"
          style="margin-left: 6px"
          @click="handleLayerControlOperation('delete')"
        >
          删&nbsp;&nbsp;&nbsp;除
        </button>
        <button
          style="background: #02979b; margin-left: 20px"
          class="operation-button"
          @click="handleLayerControlOperation('confirm')"
        >
          确&nbsp;&nbsp;&nbsp;定
        </button>
      </div>
    </div>
  </view>
</template>

<style lang="less" scoped>
.property-container {
  position: absolute;
  top: 160px;
  left: 20px;
  width: 230px;
  height: 910px;
  border: 1px solid #0d609c;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 0%, #00081d 100%);
  font-family: Microsoft YaHei;
  z-index: 99;
  padding: 9px;
  box-sizing: border-box;
}

.property-header {
  font-size: 24px;
  font-weight: bold;
  color: #fffefe;
}

.property-main {
  font-size: 16px;
  margin-top: 17px;
  font-family: Microsoft YaHei;
  color: #ffffff;
  position: relative;
  height: 95%;

  :deep(.el-select .el-input) {
    width: 210px;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #999999;
  }

  :deep(.el-input__inner) {
    font-size: 14px;
  }

  :deep(.el-input) {
    width: 210px;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #999999;
  }

  .angle-group {
    :deep(.el-input) {
      width: 0px;
      height: 0px;
      background: rgba(0, 0, 0, 0);
      border: none;
    }

    :deep(.el-slider__input) {
      width: 44px;
      margin: -20px 0 0 8px;
    }

    :deep(.el-input-number__decrease) {
      width: 15px;
      height: 15px;
      background: #aaaaaa;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      margin-top: 8px;
      border-radius: 4px;
    }

    :deep(.el-input-number__increase) {
      width: 15px;
      height: 15px;
      background: #aaaaaa;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      margin-top: 8px;
      border-radius: 4px;
    }

    :deep(.el-slider) {
      position: relative;
      box-sizing: border-box;
      width: 213px;
      padding: 14px 0 0 25px;
      display: block;
    }

    :deep(.el-input-number) {
      position: unset;
    }

    :deep(.el-slider__runway.show-input) {
      margin-right: 0;
    }

    :deep(.el-slider__runway) {
      height: 4px;
      width: 158px;
    }

    :deep(.el-slider__button) {
      width: 10px;
      height: 10px;
      border: none;
      background-color: #00ffff;
    }

    :deep(.el-slider__bar) {
      height: 4px;
      background: #00ffff;
    }

    :deep(.el-slider__button-wrapper) {
      height: 34px;
    }
  }

  .input-box {
    :deep(.el-input) {
      width: 80px;
      height: 20px;
      margin-top: -5px;
      background: rgba(0, 0, 0, 0.6);
      border: none;
    }
  }
}

.control-content {
  @apply flex flex-row;

  .control-title {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
  }
}

.operation-list {
  position: absolute;
  bottom: 20px;

  .operation-button {
    width: 90px;
    height: 28px;
    background: #778082;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 25px;
    border: none;
  }

  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
  }
}
</style>
